<template>
  <div class="xpage-detail">
    <div class="header-bar">
      <nut-tabbar
        @tab-switch="tabSwitch"
        v-model:visible="activeName"
      >
        <nut-tabbar-item
          :name="item.name"
          :tab-title="item.title"
          v-for="(item, index) in tabbar"
          :key="index"
        ></nut-tabbar-item>
      </nut-tabbar>
    </div>
    <div class="eqmain">
      <div v-if="activeName == 1">
        <div
          class="xblock-list"
          v-for="(item, index) in state.devicesList"
          :key="index"
        >
          <div
            class="xblock-cell van-hairline--bottom"
            @click="sensorClick(item)"
          >
            <!-- <div class="nut-cell__icon">
            <nut-icon size="28" :name="iconEquipment"></nut-icon>
          </div> -->
            <div class="xblock-cell__title xblock-cell__left">
              <div>{{ item.name }}</div>
              <div class="xblock-cell__time">{{ item.updateDate }}</div>
            </div>
            <div class="xblock-right">更多</div>
            <nut-icon
              class="nut-cell__link"
              name="right"
            ></nut-icon>
          </div>
          <div class="xblock-content xblock-content__cell">
            <p v-for="itemchild in item.deviceKeysList">
              <span>{{ itemchild.name }}：</span><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
            </p>
          </div>
        </div>
      </div>

      <div v-if="activeName == 2">
        <div
          class="xblock-list"
          v-for="(item, index) in state.spjkList"
          :key="item.id"
        >
          <div class="xblock-cell van-hairline--bottom">
            <!-- <div class="nut-cell__icon">
            <nut-icon size="28" :name="iconEquipment"></nut-icon>
          </div> -->
            <div class="xblock-cell__title">
              <div>{{ item.canopies?.canopyName }}</div>
            </div>
            <!-- <div class="xblock-right xblock-right__link">回放</div> -->
          </div>
          <div class="xblock-content">
            <video
              :id="item.id"
              :src="item.canopyVideoStreamList && item.canopyVideoStreamList[0]?.link"
              initial-time="0"
              :controls="true"
              :is-live="true"
              :autoplay="false"
              :loop="false"
              :muted="false"
            />
          </div>
        </div>
      </div>

      <div v-if="activeName == 3">
        <div
          class="xblock-list"
          v-for="(item, index) in state.sqcbList"
          :key="item.id"
        >
          <div class="xblock-cell van-hairline--bottom">
            <!-- <div class="nut-cell__icon">
            <nut-icon size="28" :name="iconEquipment"></nut-icon>
          </div> -->
            <div class="xblock-cell__title xblock-cell__left">
              <div>{{ item.canopies?.canopyName }}</div>
              <div class="xblock-cell__time">{{ item.updateDate }}</div>
            </div>

            <div
              class="xblock-right"
              :class="item.deviceRealData?.data == 1 ? 'xblock-right__online' : 'xblock-right__link'"
            >
              {{ item.deviceRealData?.data == 1 ? '离线' : '在线' }}
            </div>
          </div>
          <div class="xblock-content xblock-content__cell">
            <div class="xblock-content__name">
              <div class="label">设备名称：</div>{{ item.name }}
            </div>
            <nut-button
              plain
              size="mini"
              shape="round"
              type="primary"
              @click="historyClick(item.canopyId)"
            >识别历史</nut-button>
            &nbsp;&nbsp;
            <!-- <nut-button
            plain
            size="mini"
            shape="round"
            type="primary"  @click="analysisClick(item.canopyId)">虫害分析</nut-button> -->
          </div>
        </div>
      </div>

      <div v-if="activeName == 4">
        <div
          class="xblock-list"
          v-for="(item, index) in state.wxfkList"
          :key="index"
        >
          <div class="xblock-cell van-hairline--bottom">
            <!-- <div class="nut-cell__icon">
            <nut-icon size="28" :name="iconEquipment"></nut-icon>
          </div> -->
            <div class="xblock-cell__title xblock-cell__left">
              <div>{{ item.canopyName }}</div>
              <div class="xblock-cell__time">{{ item.updateDate }}</div>
            </div>
            <div
              class="xblock-right"
              @click="clickValve('record', item)"
            >历史</div>
            <nut-icon
              class="nut-cell__link"
              name="right"
              @click="clickValve('record', item)"
            ></nut-icon>
          </div>
          <div class="xblock-content xblock-content__cell">
            <p
              v-for="(child, chidIndex) in item.wxfkDeviceKeysList"
              :key="child.id"
            >
              <span>{{ child.devices?.name }}：</span>
              <span :class="getClass(child.deviceRealData?.data)">
                {{ getName(child.deviceRealData?.data) }}
              </span>
            </p>
          </div>
          <div class="xblock-content__bottom">
            <nut-button
              plain
              size="mini"
              shape="round"
              type="primary"
              @click="clickValve('operation', item)"
            >去控制</nut-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'

import { ref, onMounted, reactive } from 'vue'
import { useReachBottom, usePullDownRefresh } from '@/hooks/life'
import { useTabItemTap, useDidHide, useLoad, useDidShow } from '@tarojs/taro'
import { devicesListData, spjkListData, sqcbListData, wxfkListData } from '@/services/apis/devices'
const iconEquipment = require('@/assets/icons/icon_equipment.png')
const tabbar = ref([
  { title: '传感器', name: '1' },
  { title: '监控', name: '2' },
  { title: '虫情测报', name: '3' },
  { title: '电磁阀', name: '4' }
])
const state = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 0,
  devicesList: [],
  spjkList: [],
  sqcbList: [],
  wxfkList: []
})
const activeName = ref('1')
useTabItemTap(() => {
  init()
})
useLoad(option => {
  if (option.activeName) {
    activeName.value = option.activeName
    init()
  }

  // setTimeout(() => {
  //   activeName.value = '3'
  //   init()
  // }, 2000)
})

onMounted(() => { })
usePullDownRefresh(() => {
  init()
})
const getdevicesListData = () => {
  devicesListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize
  }).then(data => {
    if (data.result == 'true' && data.data.list) {
      state.devicesList = [].concat(state.devicesList, data.data.list)
      state.count = data.data.count
    }
  })
}
const getspjkListData = () => {
  spjkListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize
  }).then(data => {
    if (data.result == 'true' && data.data.list) {
      state.spjkList = [].concat(state.spjkList, data.data.list)
      state.count = data.data.count
    }
  })
}
const getsqcbListData = () => {
  sqcbListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize
  }).then(data => {
    if (data.result == 'true' && data.data.list) {
      state.sqcbList = [].concat(state.sqcbList, data.data.list)
      state.count = data.data.count
    }
  })
}
const getwxfkListData = () => {
  wxfkListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize
  }).then(data => {
    if (data.result == 'true' && data.data.list) {
      state.wxfkList = [].concat(state.wxfkList, data.data.list)
      state.count = data.data.count
    }
  })
}

const tabSwitch = (item, index) => {
  init()
}
useDidHide(() => {
  // console.log(1231)
  // state.devicesList = []
  // state.spjkList = []
  // state.sqcbList = []
  // state.wxfkList = []
})
const init = () => {
  state.pageNo = 1
  state.pageSize = 10
  state.count = 0
  state.devicesList = []
  state.spjkList = []
  state.sqcbList = []
  state.wxfkList = []

  switch (activeName.value) {
    case '1':
      console.log(activeName.value)
      getdevicesListData()

      break
    case '2':
      getspjkListData()

      break
    case '3':
      getsqcbListData()

      break
    case '4':
      getwxfkListData()
      break

    default:
      break
  }
}
useReachBottom(() => {
  if (state.pageNo * state.pageSize < state.count) {
    state.pageNo++
    switch (activeName.value) {
      case '1':
        getdevicesListData()

        break
      case '2':
        getspjkListData()

        break
      case '3':
        getsqcbListData()

        break
      case '4':
        getwxfkListData()
        break

      default:
        break
    }
  }
})
const source = ref({
  src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
  type: 'video/mp4'
})
const options = ref({
  controls: true
})
const play = elm => {
  console.log('play', elm)
}
const pause = elm => {
  console.log('pause', elm)
}
const playend = elm => {
  console.log('playend', elm)
}

const sensorClick = item => {
  Taro.setStorageSync('item', item)
  Taro.navigateTo({ url: `/pagesSub/detail/index?item=${item}` })
}

const historyClick = id => {
  Taro.navigateTo({ url: `/pagesSub/history/list/index?id=${id}` })
}
const analysisClick = id => {
  Taro.navigateTo({ url: `/pagesSub/analysis/index?id=${id}` })
}

const clickValve = (type, item) => {
  const arr = Object.keys(item.wxfkDeviceKeysList)
  if (arr.length === 0) {
    Taro.showToast({
      title: '该农田暂无配置无线阀控，请联系平台管理员。',
      icon: 'none',
      duration: 3000
    })
    return
  }
  Taro.setStorageSync('wxfkDeviceKeysList', item.wxfkDeviceKeysList)
  Taro.navigateTo({
    url: `/pagesSub/valve/${type}/index?id=${item.id || ''}&canopyName=${item.canopyName || ''}`
  })
}
const getName = type => {
  switch (type) {
    case '0':
      return '关闭'
      break
    case '1':
      return '打开'
      break
    case '2':
      return '活动中'
      break
    case '3':
      return '未安装'
      break
    case '4':
      return '暂停中'
      break
    case '5':
      return '阻止中'
      break
    case '6':
      return '回避'
      break
    default:
      return '关闭'
      break
  }
}
const getClass = type => {
  switch (type) {
    case '0':
      return 'yellow'
      break
    case '1':
      return 'green'
      break
    case '2':
      return ''
      break
    case '3':
      return ''
      break
    case '4':
      return ''
      break
    case '5':
      return 'red'
      break
    case '6':
      return ''
      break
    default:
      return ''
      break
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-color: #eaeaea;
$border-radius: 6px;

.eqmain {
  padding-top: 40px;

  .xblock-cell__title {
    font-size: $font-size-2;
  }

  .xblock-content__cell {
    font-size: $font-size-2;
  }

  .xblock-content {
    font-size: $font-size-2;
  }

  .xblock-content__name {
    display: flex;
    padding-bottom: 20px;
    font-size: 13px;

    .label {
      color: #666;
    }
  }
}

.nut-tabbar {
  height: 40px;
}

.nut-tabbar-item {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: #499D2F;
    border-radius: 1px;
  }

  &.nut-tabbar-item__icon--unactive {
    color: #666;

    &::after {
      opacity: 0;
    }
  }

  .nut-tabbar-item_icon-box_big-word {
    font-size: $font-size-2;
  }
}
</style>
